<template>
	<view class="box">
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index" @click="chooseRole(item)">
				<view class="name">
					{{item.name}}
				</view>
				<text v-if="item.active">当前</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserIdentity
	} from "@/api/user.js"
	export default {
		data() {
			return {
				list: [],
				redirect: '/pages/user/auxiliary'
			}
		},
		onLoad(e) {
			if (e.redirect) {
				this.redirect = "/" + decodeURIComponent(e.redirect)
			}
			this.getUserIdentity()
		},
		methods: {
			getUserIdentity() {
				getUserIdentity().then(res => {
					if (res.code == 0) {
						let list = res.data.roleData
						list.forEach(item => {
							if (this.$store.state.identity == 'store' && item.identity == 'store') {
								item.active = true
							} else if (this.$store.state.identity == 'staff' && this.$store.state
								.identity_staff_id == item.staff_id) {
								item.active = true
							}
						})
						this.list = list
					}
				})
			},
			chooseRole(item) {
				this.$store.dispatch('chooseRole', item)
				uni.switchTab({
					url: this.redirect
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f2f2f2;
		padding-top: 10px;

		.list {
			padding: 0 10px;

			.item {
				padding: 20px;
				font-weight: bold;
				position: relative;
				border-radius: 5px;
				margin-bottom: 10px;
				background: #fff;
				box-shadow: 0 0 3px #ccc;

				text {
					position: absolute;
					top: 0;
					right: 0;
					padding: 3px 8px;
					border-top-right-radius: 4px;
					border-bottom-left-radius: 4px;
					background: #00a800;
					font-size: 12px;
					color: #fff;
				}
			}
		}
	}
</style>